home *** CD-ROM | disk | FTP | other *** search
/ MacAddict 123 / MacAddict_123_2006_11.iso / Software / Productivity / iClip lite 2.wdgt / js / scripts.js < prev    next >
Text File  |  2006-08-05  |  22KB  |  582 lines
  1. // Copyright ¬© 2006, Inventive. //
  2.  
  3. // Classes //
  4.  
  5.     // Bin //
  6.     
  7.         function Bin() {
  8.             var self = this;
  9.             
  10.             // Variables //
  11.             
  12.                 this.index = 0;
  13.                 this.node = document.createElement("div");
  14.                 this.fader = {out: false, callback: null, animator: new Animator(500, 13, 0, 1, function(animation, now, first, done) {
  15.                     self.node.style.opacity = self.fader.out ? 1 - now : now;
  16.                     if (self.fader.callback)
  17.                         self.fader.callback(now);
  18.                 })};
  19.                 this.button1 = {disabled: false, hover: false, active: false};
  20.                 this.button2 = {disabled: true, hover: false, active: false};
  21.                 this.button3 = {disabled: true, hover: false, active: false};
  22.                 this.iris = {open: true, callback: null, frame: 1, animator: new Animator(500, 13, 1, 14, function(animation, now, first, done) {
  23.                     var nextFrame = Math.round(self.iris.open ? now : 15 - now);
  24.                     if (nextFrame != self.iris.frame) {
  25.                         self.iris.frame = nextFrame;
  26.                         self.node.childNodes[1].src = "media/bin/" + self.iris.frame + ".png";
  27.                     }
  28.                     if (done) {
  29.                         self.iris.open = !self.iris.open;
  30.                         if (self.iris.callback)
  31.                             self.iris.callback();
  32.                     }
  33.                 })};
  34.                 this.highlighter = {out: false, animator: new Animator(250, 13, 0, 1, function(animation, now, first, done) {
  35.                     self.node.childNodes[2].style.opacity = self.highlighter.out ? 1 - now : now;
  36.                     if (done) {
  37.                         if (!self.highlighter.out)
  38.                             self.highlighter.animator.start();
  39.                         self.highlighter.out = !self.highlighter.out;
  40.                     }
  41.                 })};
  42.                 this.doubleclick = null;
  43.             
  44.             // Create Bin //
  45.             
  46.                 var theBins = document.getElementById("bins");
  47.                 this.node.setAttribute("style", "position: relative; display: inline-block; width: 10.2em; height: 11.5em;");
  48.                 var node = document.createElement("canvas");
  49.                 node.setAttribute("style", "position: absolute; left: 1.5em; top: 1.5em; width: 7.2em; height: 7.2em;");
  50.                 this.node.appendChild(node);
  51.                 node = document.createElement("img");
  52.                 node.setAttribute("style", "position: absolute; width: 10.2em; height: 10.2em;");
  53.                 node.setAttribute("src", "media/bin/1.png");
  54.                 this.node.appendChild(node);
  55.                 node = document.createElement("img");
  56.                 node.setAttribute("style", "position: absolute; width: 10.2em; height: 10.2em; opacity: 0;");
  57.                 node.setAttribute("src", "media/bin/highlighted.png");
  58.                 this.node.appendChild(node);
  59.                 node = document.createElement("img");
  60.                 node.setAttribute("style", "position: absolute; left: 2.3em; bottom: 0; width: 4.6em; height: 3.2em;");
  61.                 node.setAttribute("src", "media/bin/in/normal.png");
  62.                 this.node.appendChild(node);
  63.                 node = document.createElement("img");
  64.                 node.setAttribute("style", "position: absolute; left: 5.3em; bottom: 0.2em; width: 3.1em; height: 3.1em;");
  65.                 node.setAttribute("src", "media/bin/delete/disabled.png");
  66.                 this.node.appendChild(node);
  67.                 node = document.createElement("img");
  68.                 node.setAttribute("style", "position: absolute; left: 6.8em; bottom: 0.7em; width: 3em; height: 4.4em;");
  69.                 node.setAttribute("src", "media/bin/out/disabled.png");
  70.                 this.node.appendChild(node);
  71.                 node = document.createElement("div");
  72.                 node.setAttribute("style", "position: absolute; left: 1.5em; top: 1.5em; width: 7.2em; height: 7.2em; z-index: 1; -apple-dashboard-region: dashboard-region(control circle);");
  73.                 //node.setAttribute("title", "Preview");
  74.                 this.node.appendChild(node);
  75.                 node = document.createElement("div");
  76.                 node.setAttribute("style", "position: absolute; left: 4.7em; bottom: 0.8em; width: 1.2em; height: 1.2em; z-index: 1; -apple-dashboard-region: dashboard-region(control rectangle);");
  77.                 //node.setAttribute("title", "Paste");
  78.                 this.node.appendChild(node);
  79.                 node = document.createElement("div");
  80.                 node.setAttribute("style", "position: absolute; left: 6.2em; bottom: 1.2em; width: 1.2em; height: 1.2em; z-index: 1; -apple-dashboard-region: dashboard-region(control rectangle);");
  81.                 //node.setAttribute("title", "Delete");
  82.                 this.node.appendChild(node);
  83.                 node = document.createElement("div");
  84.                 node.setAttribute("style", "position: absolute; left: 7.6em; bottom: 1.8em; width: 1.2em; height: 1.2em; z-index: 1; -apple-dashboard-region: dashboard-region(control rectangle);");
  85.                 //node.setAttribute("title", "Copy");
  86.                 this.node.appendChild(node);
  87.                 theBins.appendChild(this.node);
  88.             
  89.             // Bin Events //
  90.             
  91.                 addEvent(this.node.childNodes[6], "click", false, function() {
  92.                     if (self.doubleclick != null) {
  93.                         clearInterval(self.doubleclick);
  94.                         self.doubleclick = null;
  95.                         if (window.iCliplite)
  96.                             eval(iCliplite.clipBinDoubleClickFunctionAtPosition(self.index));
  97.                     }
  98.                     else {
  99.                         self.doubleclick = setInterval(function() {
  100.                             clearInterval(self.doubleclick);
  101.                             self.doubleclick = null;
  102.                         }, 300);
  103.                     }
  104.                 });
  105.                 
  106.                 addEvent(this.node.childNodes[7], "mouseover", false, function(event) {
  107.                     if (!self.button1.disabled) {
  108.                         self.button1.hover = true;
  109.                         self.node.childNodes[3].src = "media/bin/in/" + (self.button1.active ? "active" : "hover") + ".png";
  110.                     }
  111.                     event.stopPropagation();
  112.                 });
  113.                 
  114.                 addEvent(this.node.childNodes[7], "mousedown", false, function(event) {
  115.                     if (!self.button1.disabled) {
  116.                         self.button1.active = true;
  117.                         self.node.childNodes[3].src = "media/bin/in/active.png";
  118.                         event.returnValue = false;
  119.                     }
  120.                 });
  121.                 
  122.                 addEvent(this.node.childNodes[7], "mouseout", false, function(event) {
  123.                     if (!self.button1.disabled) {
  124.                         self.button1.hover = false;
  125.                         self.node.childNodes[3].src = "media/bin/in/normal.png";
  126.                     }
  127.                     event.stopPropagation();
  128.                 });
  129.                 
  130.                 addEvent(this.node.childNodes[8], "mouseover", false, function(event) {
  131.                     if (!self.button2.disabled) {
  132.                         self.button2.hover = true;
  133.                         self.node.childNodes[4].src = "media/bin/delete/" + (self.button2.active ? "active" : "hover") + ".png";
  134.                     }
  135.                     event.stopPropagation();
  136.                 });
  137.                 
  138.                 addEvent(this.node.childNodes[8], "mousedown", false, function(event) {
  139.                     if (!self.button2.disabled) {
  140.                         self.button2.active = true;
  141.                         self.node.childNodes[4].src = "media/bin/delete/active.png";
  142.                         event.returnValue = false;
  143.                     }
  144.                 });
  145.                 
  146.                 addEvent(this.node.childNodes[8], "mouseout", false, function(event) {
  147.                     if (!self.button2.disabled) {
  148.                         self.button2.hover = false;
  149.                         self.node.childNodes[4].src = "media/bin/delete/normal.png";
  150.                     }
  151.                     event.stopPropagation();
  152.                 });
  153.                 
  154.                 addEvent(this.node.childNodes[9], "mouseover", false, function(event) {
  155.                     if (!self.button3.disabled) {
  156.                         self.button3.hover = true;
  157.                         self.node.childNodes[5].src = "media/bin/out/" + (self.button3.active ? "active" : "hover") + ".png";
  158.                     }
  159.                     event.stopPropagation();
  160.                 });
  161.                 
  162.                 addEvent(this.node.childNodes[9], "mousedown", false, function(event) {
  163.                     if (!self.button3.disabled) {
  164.                         self.node.childNodes[5].src = "media/bin/out/active.png";
  165.                         self.button3.active = true;
  166.                         event.returnValue = false;
  167.                     }
  168.                 });
  169.                 
  170.                 addEvent(this.node.childNodes[9], "mouseout", false, function(event) {
  171.                     if (!self.button3.disabled) {
  172.                         self.button3.hover = false;
  173.                         self.node.childNodes[5].src = "media/bin/out/normal.png";
  174.                     }
  175.                     event.stopPropagation();
  176.                 });
  177.                 
  178.                 addEvent(window, "mouseup", false, function(event) {
  179.                     if (self.button1.active) {
  180.                         self.button1.active = false;
  181.                         if (self.button1.hover && self.iris.animator.timer == null) {
  182.                             if (!self.iris.open) {
  183.                                 self.iris.callback = function() {
  184.                                     if (window.iCliplite)
  185.                                         iCliplite.handleClipInAtPosition(self.index);
  186.                                     self.refresh(false);
  187.                                     self.iris.callback = null;
  188.                                     self.iris.animator.start();
  189.                                 }
  190.                             }
  191.                             else {
  192.                                 if (window.iCliplite)
  193.                                     iCliplite.handleClipInAtPosition(self.index);
  194.                                 self.refresh(false);
  195.                             }
  196.                             self.iris.animator.start();
  197.                             self.button2.disabled = false;
  198.                             self.button3.disabled = false;
  199.                         }
  200.                         self.node.childNodes[3].src = "media/bin/in/" + (self.button1.disabled ? "disabled" : (self.button1.hover ? "hover" : "normal")) + ".png";
  201.                         self.node.childNodes[4].src = "media/bin/delete/" + (self.button2.disabled ? "disabled" : (self.button2.hover ? "hover" : "normal")) + ".png";
  202.                         self.node.childNodes[5].src = "media/bin/out/" + (self.button3.disabled ? "disabled" : (self.button3.hover ? "hover" : "normal")) + ".png";
  203.                     }
  204.                     else if (self.button2.active) {
  205.                         self.button2.active = false;
  206.                         if (self.iris.animator.timer == null && self.button2.hover) {
  207.                             if (event.shiftKey && event.altKey) {
  208.                                 for (var i = 0; i < maxBins; i++) {
  209.                                     if (!bins[i].iris.open) {
  210.                                         bins[i].button2.hover = false;
  211.                                         bins[i].button2.disabled = true;
  212.                                         bins[i].button3.disabled = true;
  213.                                         bins[i].node.childNodes[4].src = "media/bin/delete/disabled.png";
  214.                                         bins[i].node.childNodes[5].src = "media/bin/out/disabled.png";
  215.                                         bins[i].iris.open = false;
  216.                                         bins[i].iris.animator.start();
  217.                                         if (window.iCliplite) {
  218.                                             iCliplite.handleDeleteClipAtPosition(bins[i].index);
  219.                                             bins[i].node.childNodes[0].src = "";
  220.                                         }
  221.                                     }
  222.                                 }
  223.                             }
  224.                             else {
  225.                                 self.button2.hover = false;
  226.                                 self.button2.disabled = true;
  227.                                 self.button3.disabled = true;
  228.                                 self.iris.animator.start();
  229.                                 if (window.iCliplite) {
  230.                                     iCliplite.handleDeleteClipAtPosition(self.index);
  231.                                     self.node.childNodes[0].src = "";
  232.                                 }
  233.                             }
  234.                         }
  235.                         self.node.childNodes[3].src = "media/bin/in/" + (self.button1.disabled ? "disabled" : (self.button1.hover ? "hover" : "normal")) + ".png";
  236.                         self.node.childNodes[4].src = "media/bin/delete/" + (self.button2.disabled ? "disabled" : (self.button2.hover ? "hover" : "normal")) + ".png";
  237.                         self.node.childNodes[5].src = "media/bin/out/" + (self.button3.disabled ? "disabled" : (self.button3.hover ? "hover" : "normal")) + ".png";
  238.                     }
  239.                     else if (self.button3.active) {
  240.                         self.button3.active = false;
  241.                         if (self.button3.hover && self.highlighter.animator.timer == null) {
  242.                             self.highlighter.animator.start();
  243.                             if (window.iCliplite)
  244.                                 iCliplite.handleClipOutAtPosition(self.index);
  245.                         }
  246.                         self.node.childNodes[3].src = "media/bin/in/" + (self.button1.disabled ? "disabled" : (self.button1.hover ? "hover" : "normal")) + ".png";
  247.                         self.node.childNodes[4].src = "media/bin/delete/" + (self.button2.disabled ? "disabled" : (self.button2.hover ? "hover" : "normal")) + ".png";
  248.                         self.node.childNodes[5].src = "media/bin/out/" + (self.button3.disabled ? "disabled" : (self.button3.hover ? "hover" : "normal")) + ".png";
  249.                     }
  250.                 });
  251.             
  252.             ////
  253.         }
  254.         
  255.         Bin.prototype.fade = function(out, callback) {
  256.             this.fader.out = out;
  257.             this.fader.callback = callback;
  258.             this.fader.animator.start();
  259.         }
  260.         
  261.         Bin.prototype.refresh = function(open) {
  262.             if (window.iCliplite) {
  263.                 if (iCliplite.isClipBinPopulatedAtPosition(this.index)) {
  264.                     var self = this;
  265.                     var image = new Image();
  266.                     image.src = encodeURI(iCliplite.clipPreviewImageURLAtPosition(this.index));
  267.                     image.onload = function() {
  268.                         var context = self.node.childNodes[0].getContext("2d");
  269.                         context.fillStyle = "white";
  270.                         context.fillRect(0, 0, 72, 72);
  271.                         context.drawImage(image, (72 - image.width) / 2, (72 - image.height) / 2);
  272.                     }
  273.                     if (image.complete)
  274.                         image.onload();
  275.                     if (open) {
  276.                         if (this.iris.open)
  277.                             this.iris.animator.start();
  278.                         this.button2.disabled = false;
  279.                         this.button3.disabled = false;
  280.                         this.node.childNodes[4].src = "media/bin/delete/normal.png";
  281.                         this.node.childNodes[5].src = "media/bin/out/normal.png";
  282.                     }
  283.                 }
  284.                 else {
  285.                     if (!this.iris.open) {
  286.                         this.node.childNodes[0].src = "";
  287.                         this.iris.open = false;
  288.                         this.iris.animator.start();
  289.                         this.button2.disabled = true;
  290.                         this.button3.disabled = true;
  291.                         this.node.childNodes[4].src = "media/bin/delete/disabled.png";
  292.                         this.node.childNodes[5].src = "media/bin/out/disabled.png";
  293.                     }
  294.                 }
  295.             }
  296.         }
  297.         
  298.     // Resize //
  299.     
  300.         function Resizer() {
  301.             this.node = document.getElementById("resizer");
  302.             this.down = false;
  303.             this.downX = 0;
  304.             
  305.             var self = this;
  306.             
  307.             addEvent(this.node, "mousedown", false, function(event) {
  308.                 self.down = true;
  309.                 self.downX = event.clientX - self.node.offsetLeft;
  310.                 event.returnValue = false;
  311.             });
  312.             
  313.             addEvent(window, "mousemove", false, function(event) {
  314.                 if (self.down) {
  315.                     var grown = event.clientX - self.node.offsetLeft - self.downX;
  316.                     var front = document.getElementById("front");
  317.                     if (front.clientWidth + grown < 227)
  318.                         grown = 227 - front.clientWidth;
  319.                     else if (front.clientWidth + grown > 227 + ((maxBins - 1) * 102))
  320.                         grown = (227 + ((maxBins - 1) * 102)) - front.clientWidth;
  321.                     if (window.widget)
  322.                         window.resizeBy(grown, 0);
  323.                     front.style.width = ((front.clientWidth + grown) / 10) + "em";
  324.                     front.childNodes[2].style.width = ((front.childNodes[2].clientWidth + grown) / 10) + "em";
  325.                     front.childNodes[9].style.width = ((front.childNodes[9].clientWidth + grown) / 10) + "em";
  326.                     scrollbar.refresh();
  327.                     if (Math.floor((front.childNodes[9].clientWidth) / 102) > visibleBins && visibleBins < bins.length)
  328.                         visibleBins += 1;
  329.                     else if (Math.floor((front.childNodes[9].clientWidth) / 102) < visibleBins)
  330.                         visibleBins -= 1;
  331.                 }
  332.             });
  333.             
  334.             addEvent(window, "mouseup", false, function() {
  335.                 if (self.down) {
  336.                     self.down = false;
  337.                     var front = document.getElementById("front");
  338.                     visibleBins = Math.round(front.childNodes[9].clientWidth / 102);
  339.                     if (front.childNodes[2].clientWidth != (visibleBins * 102) + 75) {
  340.                         if (window.widget)
  341.                             window.resizeTo((visibleBins * 102) + 125, 148);
  342.                         front.style.width = (((visibleBins * 102) + 125) / 10) + "em";
  343.                         front.childNodes[2].style.width = (((visibleBins * 102) + 73) / 10) + "em";
  344.                         front.childNodes[9].style.width = (((visibleBins * 102)) / 10) + "em";
  345.                         scrollbar.refresh();
  346.                         scrollbar.scrollArea(Math.round(scrollbar.area.scrollLeft / 102) * 102);
  347.                     }
  348.                     setPref("Bins", visibleBins);
  349.                 }
  350.             });
  351.         }
  352.     
  353.     ////
  354.  
  355. // Events //
  356.  
  357.     addEvent(window, "load", false, function() {
  358.         var instanceRunning = false;
  359.         if (window.iCliplite) {
  360.             iCliplite.initializeWithWidgetFolderURL(document.URL + "/../");
  361.             instanceRunning = iCliplite.isAnotherWidgetInstanceRunning();
  362.         }
  363.         
  364.         if (!instanceRunning) {
  365.             binCount = getPref("Bins", 5);
  366.             maxBins = window.iCliplite ? iCliplite.clipBinCount() : 25;
  367.             for (var i = 0; i < maxBins; i++) {
  368.                 bins[i] = new Bin();
  369.                 bins[i].index = i + 1;
  370.                 bins[i].refresh(true);
  371.             }
  372.             
  373.             var resizeBy = ((binCount - 1) * 102) / 100;
  374.             var node = document.getElementById("front");
  375.             var binFades = new Array();
  376.             resize = new Animator(binCount * 333, 13, 0, 100, function(animation, now, first, done) {
  377.                 if (window.widget)
  378.                     window.resizeTo((now * resizeBy) + 227, 148);
  379.                 node.style.width = (((now * resizeBy) + 227) / 10) + "em";
  380.                 node.childNodes[2].style.width = (((now * resizeBy) + 175) / 10) + "em";
  381.                 node.childNodes[9].style.width = (((now * resizeBy) + 102) / 10) + "em";
  382.                 if (done) {
  383.                     scrollbar = new Scrollbar(document.getElementById("scrollbar"), document.getElementById("bins"), true, 0, 0);
  384.                     elementFader = new Animator(500, 13, 0, 1, function(animation, now, first, done) {
  385.                         document.getElementById("record").style.opacity = now;
  386.                         document.getElementById("scrollbar").style.opacity = now;
  387.                         document.getElementById("resizer").style.opacity = now;
  388.                         if (done) {
  389.                             if (getPref("Recording", false))
  390.                                 buttons.instances["record"].start();
  391.                         }
  392.                     });
  393.                     elementFader.start();
  394.                 }
  395.             });
  396.             resize.start();
  397.             
  398.             theResizer = new Resizer();
  399.             backResizer.animator = new Animator(500, 13, 0, 100, function(animation, now, first, done) {
  400.                 if (window.widget) window.resizeTo(backResizer.from - (now * backResizer.multiplier), 148);
  401.                 document.getElementById("back").style.width = ((backResizer.from - (now * backResizer.multiplier)) / 10) + "em";
  402.                 document.getElementById("back").childNodes[2].style.width = ((backResizer.from - (now * backResizer.multiplier) - 54) / 10) + "em";
  403.                 if (done) backFader.out ? flipMe(false) : backFader.animator.start();
  404.             });
  405.             backFader.animator = new Animator(500, 13, 0, 1, function(animation, now, first, done) {
  406.                 document.getElementById("info").style.opacity = backFader.out ? 1 - now : now;
  407.                 document.getElementById("inventive").style.opacity = backFader.out ? 1 - now : now;
  408.                 document.getElementById("help").style.opacity = backFader.out ? 1 - now : now;
  409.                 document.getElementById("url").style.opacity = backFader.out ? 1 - now : now;
  410.                 document.getElementById("done").style.opacity = backFader.out ? 1 - now : now;
  411.                 if (done && backFader.out) backResizer.animator.start();
  412.             });
  413.             
  414.             addAnimatingButton(document.getElementById("record"), "record", 12, function() {
  415.                 pollPlugin = !pollPlugin;
  416.                 if (window.iCliplite && pollPlugin) {
  417.                     if (buttons.instances["record"].timer != null && iCliplite.hasClipboardChanged()) {
  418.                         var binIndexRecordedTo = iCliplite.recordClipboardChange();
  419.                         for (var i = 1; i <= binIndexRecordedTo; i++) {
  420.                             bins[i - 1].refresh(true);
  421.                         }
  422.                         scrollbar.scrollBar((binIndexRecordedTo - Math.round(front.childNodes[9].clientWidth / 102)) * 102);
  423.                     }
  424.                 }
  425.             }, 125, function() {
  426.                 setPref("Recording", this.timer == null);
  427.                 if (this.timer == null)
  428.                     this.start();
  429.                 else
  430.                     this.stop();
  431.             });
  432.             
  433.             addButton(document.getElementById("flip"), "flip", function() {
  434.                 flipMe(true);
  435.                 flip.shown = false;
  436.             });
  437.             
  438.             addEvent(document.getElementById("url").childNodes[0], "click", false, function(event) {
  439.                 if (window.widget) {
  440.                     widget.openURL(this.href);
  441.                     event.returnValue = false;
  442.                 }
  443.             });
  444.                     
  445.             addButton(document.getElementById("help"), "help", function() {
  446.                 if (window.widget)
  447.                     widget.openURL("http://inventive.us/iCliplite/");
  448.             });
  449.             
  450.             var done = document.getElementById("done");
  451.             
  452.             addEvent(done, "mouseover", false, function() {
  453.                 done.hover = true;
  454.                 if (done.active) {
  455.                     done.childNodes[1].src = "media/button/left_active.png";
  456.                     done.childNodes[2].src = "media/button/middle_active.png";
  457.                     done.childNodes[3].src = "media/button/right_active.png";
  458.                 }
  459.             });
  460.             
  461.             addEvent(done, "mousedown", false, function(event) {
  462.                 done.active = true;
  463.                 done.childNodes[1].src = "media/button/left_active.png";
  464.                 done.childNodes[2].src = "media/button/middle_active.png";
  465.                 done.childNodes[3].src = "media/button/right_active.png";
  466.                 event.returnValue = false;
  467.             });
  468.             
  469.             addEvent(window, "mouseup", false, function() {
  470.                 if (done.active) {
  471.                     done.active = false;
  472.                     done.childNodes[1].src = "media/button/left.png";
  473.                     done.childNodes[2].src = "media/button/middle.png";
  474.                     done.childNodes[3].src = "media/button/right.png";
  475.                     if (done.hover) {
  476.                         done.hover = false;
  477.                         backResizer.from = 468;
  478.                         backResizer.multiplier = 0 - backResizer.multiplier;
  479.                         backFader.out = true;
  480.                         backFader.animator.start();
  481.                     }
  482.                 }
  483.             });
  484.             
  485.             addEvent(done, "mouseout", false, function() {
  486.                 done.hover = false;
  487.                 if (done.active) {
  488.                     done.childNodes[1].src = "media/button/left.png";
  489.                     done.childNodes[2].src = "media/button/middle.png";
  490.                     done.childNodes[3].src = "media/button/right.png";
  491.                 }
  492.             });
  493.             
  494.             flip = {node: document.getElementById("flip"), shown: false, animator: new Animator(500, 13, 0, 1, function(animation, now, first, done) {
  495.                 flip.node.style.opacity = flip.shown ? now : 1 - now;
  496.             })};
  497.             
  498.             addEvent(window, "mousemove", false, function(event) {
  499.                 var one = document.getElementById("front");
  500.                 var inside = event.clientX >= one.offsetLeft && event.clientX <= one.offsetLeft + one.clientWidth && event.clientY >= one.offsetTop && event.clientY <= one.offsetTop + one.clientHeight;
  501.                 if (!flip.shown && inside) {
  502.                     flip.shown = true;
  503.                     flip.animator.start();
  504.                 }    
  505.                 if (flip.shown && !inside) {
  506.                     flip.shown = false;
  507.                     flip.animator.start();
  508.                 }    
  509.             });
  510.         }
  511.         else
  512.             document.getElementById("multiple").style.display = "block";
  513.     });
  514.         
  515.     if (window.widget) {
  516.         widget.onshow = function() {
  517.             visible = true;
  518.         }
  519.         
  520.         widget.onhide = function() {
  521.             visible = false;
  522.         }
  523.         
  524.         widget.onremove = function() {
  525.             if (iCliplite) iCliplite.finalize();
  526.         }
  527.     }
  528.  
  529. // Functions //
  530.  
  531.     function flipMe(toBack) {
  532.         if (window.widget) widget.prepareForTransition(toBack ? "ToBack" : "ToFront");
  533.         if (toBack) {
  534.             frontSize = document.getElementById("front").clientWidth;
  535.             scrolled = document.getElementById("bins").scrollLeft;
  536.             document.getElementById("back").style.width = (frontSize / 10) + "em";
  537.             document.getElementById("back").childNodes[2].style.width = ((frontSize - 54) / 10) + "em";
  538.         }
  539.         document.getElementById((toBack ? "front" : "back")).style.top = "14.8em";
  540.         document.getElementById((toBack ? "front" : "back")).style.opacity = 0;
  541.         document.getElementById((toBack ? "back" : "front")).style.top = 0;
  542.         document.getElementById((toBack ? "back" : "front")).style.opacity = 1;
  543.         if (!toBack) {
  544.             for (var i = 0; i < maxBins; i++)
  545.                 setTimeout("bins[" + i + "].refresh(false);", 0);
  546.             setTimeout("document.getElementById('bins').scrollLeft = scrolled;", 0);
  547.         }
  548.         if (window.widget) setTimeout("widget.performTransition();", 0);
  549.         setTimeout(function() {
  550.             if (toBack) {
  551.                 backFader.out = false;
  552.                 backResizer.from = frontSize;
  553.                 backResizer.multiplier = (frontSize - 468) / 100;
  554.                 backResizer.animator.start();
  555.             }
  556.         }, 1000);
  557.     }
  558.     
  559.     function beep() {
  560.         if (window.iCliplite)
  561.             iCliplite.beep();
  562.     }
  563.  
  564. // Variables //
  565.  
  566.     var bins = new Array();
  567.     var flip = null;
  568.     var recording = null;
  569.     var resize = null;
  570.     var theResizer = null;
  571.     var visibleBins = 0;
  572.     var scrollbar = null;
  573.     var done = {hover: false, active: false};
  574.     var visible = true;
  575.     var elementFader = null;
  576.     var maxBins = 0;
  577.     var binCount = 0;
  578.     var scrolled = 0;
  579.     var frontSize = 0;
  580.     var pollPlugin = false;
  581.     var backResizer = {from: 0, multiplier: 0, animator: null};
  582.     var backFader = {out: false, animator: null};